<script setup>
import { ref } from 'vue';
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated } from "vue";

const count = ref(1);

function add() {
  count.value++;
}

// 生命周期钩子函数
// 挂载
onBeforeMount(() => {
  console.log("挂载前 count: ", count.value);
  console.log("挂载前 btn01: ", document.getElementById("btn01"));
});

onMounted(() => {
  console.log("挂载完成 count: ", count.value);
  console.log("挂载完成 btn01: ", document.getElementById("btn01"));
});

// 更新
onBeforeUpdate(() => {
  console.log("更新前 count: ", count.value);
  console.log("更新前 btn01内容: ", document.getElementById("btn01").innerHTML);
});

onUpdated(() => {
  console.log("更新完成 count: ", count.value);
  console.log("更新完成 btn01内容: ", document.getElementById("btn01").innerHTML);
});
</script>

<template>
 <div>
   <button id="btn01" @click="add">自增 {{count}}</button>
 </div>
</template>

<style scoped>

</style>
